$(function () {
    map();
    echarts_5();
    echarts_6();
    echarts_7();
    echarts_8();
    echarts_9();
    echarts_10();
    echarts_11();
    echarts_12();
   
    function map() {
        // 基于准备好的dom，初始化echarts实例
        // var myChart = echarts.init(document.getElementById('map'));
        var myChart = echarts.init(document.getElementById('map'));
        // var oBack = document.getElementById("back");

        var provinces = ['shanghai', 'hebei', 'shanxi', 'neimenggu', 'liaoning', 'jilin', 'heilongjiang', 'jiangsu', 'zhejiang', 'anhui', 'fujian', 'jiangxi', 'shandong', 'henan', 'hubei', 'hunan', 'guangdong', 'guangxi', 'hainan', 'sichuan', 'guizhou', 'yunnan', 'xizang', 'shanxi1', 'gansu', 'qinghai', 'ningxia', 'xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen'];

        var provincesText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门'];

        var seriesData = [{
            name: '北京',
            value: 100
        }, {
            name: '天津',
            value: 0
        }, {
            name: '上海',
            value: 60
        }, {
            name: '重庆',
            value: 20
        }, {
            name: '河北',
            value: 60
        }, {
            name: '河南',
            value: 60
        }, {
            name: '云南',
            value: 0
        }, {
            name: '辽宁',
            value: 0
        }, {
            name: '黑龙江',
            value: 0
        }, {
            name: '湖南',
            value: 60
        }, {
            name: '安徽',
            value: 10
        }, {
            name: '山东',
            value: 60
        }, {
            name: '新疆',
            value: 0
        }, {
            name: '江苏',
            value: 0
        }, {
            name: '浙江',
            value: 0
        }, {
            name: '江西',
            value: 0
        }, {
            name: '湖北',
            value: 60
        }, {
            name: '广西',
            value: 60
        }, {
            name: '甘肃',
            value: 50
        }, {
            name: '山西',
            value: 60
        }, {
            name: '内蒙古',
            value: 90
        }, {
            name: '陕西',
            value: 0
        }, {
            name: '吉林',
            value: 0
        }, {
            name: '福建',
            value: 15
        }, {
            name: '贵州',
            value: 0
        }, {
            name: '广东',
            value: 597
        }, {
            name: '青海',
            value: 0
        }, {
            name: '西藏',
            value: 0
        }, {
            name: '四川',
            value: 60
        }, {
            name: '宁夏',
            value: 0
        }, {
            name: '海南',
            value: 60
        }, {
            name: '台湾',
            value: 80
        }, {
            name: '香港',
            value: 0
        }, {
            name: '澳门',
            value: 90
        }];

        // oBack.onclick = function () {
        //   initEcharts("china", "中国");
        // };

        initEcharts("china", "中国");

        // 初始化echarts
        function initEcharts(pName, Chinese_) {
            var tmpSeriesData = pName === "china" ? seriesData : [];

            var option = {
                title: {
                    text: Chinese_ || pName,
                    left: 'center',
                    textStyle: {
                        color: '#fff'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}<br/>{c} (p / km2)'
                },
                visualMap: {
                    min: 0, // 最小值
                    max: 100, // 最大值
                    text: ['100', '0'],
                    realtime: false,
                    calculable: false,
                    inRange: {
                      color: ['rgba(0,130,210,0.6)', 'rgba(0,210,170,0.6)','rgba(244,184,34,0.6)'] // 渐变颜色
                    }
                  },
                
                series: [{
                    name: Chinese_ || pName,
                    type: 'map',
                    mapType: pName,
                    roam: false, //是否开启鼠标缩放和平移漫游
                    data: tmpSeriesData,
                    top: "3%", //组件距离容器的距离
                    zoom: 1.1,
                    selectedMode: 'single',

                    label: {
                        normal: {
                            show: true, //显示省份标签
                            textStyle: {
                                color: "#fbfdfe"
                            } //省份标签字体颜色
                        },
                        emphasis: { //对应的鼠标悬浮效果
                            show: true,
                            textStyle: {
                                color: "#323232"
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderWidth: .5, //区域边框宽度
                            borderColor: '#2A576B', //区域边框颜色
                            areaColor: "#19B6ED", //区域颜色

                        },

                        emphasis: {
                            borderWidth: .5,
                            borderColor: '#2A576B',
                            areaColor: "#56B9FF",
                        }
                    },
                }]

            };

            myChart.setOption(option);

            myChart.off("click");

            if (pName === "china") { // 全国时，添加click 进入省级
                myChart.on('dblclick', function (param) {
                    console.log(param.name);
                    // 遍历取到provincesText 中的下标  去拿到对应的省js
                    for (var i = 0; i < provincesText.length; i++) {
                        if (param.name === provincesText[i]) {
                            //显示对应省份的方法
                            showProvince(provinces[i], provincesText[i]);
                            break;
                        }
                    }
                    if (param.componentType === 'series') {
                        var provinceName = param.name;
                        $('#box').css('display', 'block');
                        $("#box-title").html(provinceName);

                    }
                });
            } else { // 省份，添加双击 回退到全国
                myChart.on("dblclick", function () {
                    initEcharts("china", "中国");
                });
            }
        }

        // 展示对应的省
        function showProvince(pName, Chinese_) {
            //这写省份的js都是通过在线构建工具生成的，保存在本地，需要时加载使用即可，最好不要一开始全部直接引入。
            loadBdScript('$' + pName + 'JS', './js/map/province/' + pName + '.js', function () {
                initEcharts(Chinese_);
            });
        }

        // 加载对应的JS
        function loadBdScript(scriptId, url, callback) {
            var script = document.createElement("script");
            script.type = "text/javascript";
            if (script.readyState) { //IE
                script.onreadystatechange = function () {
                    if (script.readyState === "loaded" || script.readyState === "complete") {
                        script.onreadystatechange = null;
                        callback();
                    }
                };
            } else { // Others
                script.onload = function () {
                    callback();
                };
            }
            script.src = url;
            script.id = scriptId;
            document.getElementsByTagName("head")[0].appendChild(script);
        };
    }

    function echarts_5() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts_5'));

        var xData = function () {
            var data = ['NO.1', 'NO.2', 'NO.3', 'NO.4', 'NO.5'];

            return data;
        }();

        var data = [28, 22, 20, 16, 12]

        option = {
            // backgroundColor: "#141f56",

            tooltip: {
                show: "true",
                trigger: 'item',
                backgroundColor: 'rgba(0,0,0,0.4)', // 背景
                padding: [8, 10], //内边距
                // extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
                formatter: function (params) {
                    if (params.seriesName != "") {
                        return params.name + ' ：  ' + params.value + ' 辆';
                    }
                },

            },
            grid: {
                borderWidth: 0,
                top: 20,
                bottom: 35,
                left: 55,
                right: 30,
                textStyle: {
                    color: "#fff"
                }
            },
            xAxis: [{
                type: 'category',

                axisTick: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#363e83',
                    }
                },
                axisLabel: {
                    inside: false,
                    textStyle: {
                        color: '#bac0c0',
                        fontWeight: 'normal',
                        fontSize: '12',
                    },
                    // formatter:function(val){
                    //     return val.split("").join("\n")
                    // },
                },
                data: xData,
            }, {
                type: 'category',
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                splitArea: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                data: xData,
            }],
            yAxis: {
                type: 'value',
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#32346c',
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#32346c ',
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#bac0c0',
                        fontWeight: 'normal',
                        fontSize: '12',
                    },
                    formatter: '{value}',
                },
            },
            series: [{
                    // name: '生师比(%)',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            show: true,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#00c0e9'
                            }, {
                                offset: 1,
                                color: '#3b73cf'
                            }]),
                            barBorderRadius: 50,
                            borderWidth: 0,
                        },
                        emphasis: {
                            shadowBlur: 15,
                            shadowColor: 'rgba(105,123, 214, 0.7)'
                        }
                    },
                    zlevel: 2,
                    barWidth: '20%',
                    data: data,
                },
                {
                    name: '',
                    type: 'bar',
                    xAxisIndex: 1,
                    zlevel: 1,
                    itemStyle: {
                        normal: {
                            color: '#121847',
                            borderWidth: 0,
                            shadowBlur: {
                                shadowColor: 'rgba(255,255,255,0.31)',
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowOffsetY: 2,
                            },
                        }
                    },
                    barWidth: '20%',
                    data: [30, 30, 30, 30, 30]
                }
            ]
        }


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    function echarts_6() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts_6'));

        option = {
            backgroundColor: 'rgba(255,255,255,0)',
            tooltip: {
                trigger: 'axis',
                backgroundColor: 'rgba(0,0,0,0.4)', // 背景
            },
            legend: {
                data: [{
                        name: '交通事故',
                        icon: 'circle',
                    },
                    {
                        name: '火灾事故',
                        icon: 'circle',
                    },
                    {
                        name: '氢能源事故',
                        icon: 'circle',
                    },
                ],
                textStyle: {
                    color: '#bac0c0',
                    fontWeight: 'normal',
                    fontSize: '12',
                },
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true,
                textStyle: {
                    color: "#fff"
                }
            },
            toolbox: {
                feature: {
                    // saveAsImage: {}
                }
            },
            xAxis: { // x轴
                type: 'category',
                boundaryGap: false,
                data: ['01', '02', '03', '04', '05', '07', '08'],
                axisLabel: {
                    inside: false,
                    textStyle: {
                        color: '#bac0c0',
                        fontWeight: 'normal',
                        fontSize: '12',
                    },
                },
            },
            yAxis: { // y轴
                type: 'value',
                axisLabel: {
                    inside: false,
                    textStyle: {
                        color: '#bac0c0',
                        fontWeight: 'normal',
                        fontSize: '12',
                    },
                },
            },

            series: [{
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line',
                    name: '交通事故',
                    smooth: true,
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [{
                                        offset: 0,
                                        color: '#288E94'
                                    },
                                    {
                                        offset: 0.5,
                                        color: '#1F545C'
                                    },
                                    {
                                        offset: 1,
                                        color: '#1A3C49'
                                    }
                                ]
                            )
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,0,0.8)',
                            lineStyle: {
                                color: '#00FF00'
                            }
                        }
                    }
                }, {
                    data: [520, 692, 601, 1134, 1490, 1430, 1220],
                    type: 'line',
                    name: '火灾事故',
                    smooth: true,
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [{
                                        offset: 0,
                                        color: '#288E94'
                                    },
                                    {
                                        offset: 0.5,
                                        color: '#1F545C'
                                    },
                                    {
                                        offset: 1,
                                        color: '#1A3C49'
                                    }
                                ]
                            )
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,0,0.8)',
                            lineStyle: {
                                color: '#00FF99'
                            }
                        }
                    }
                },
                {
                    data: [520, 432, 901, 934, 190, 1130, 1320],
                    type: 'line',
                    name: '氢能源事故',
                    smooth: true,
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [{
                                        offset: 0,
                                        color: '#288E94'
                                    },
                                    {
                                        offset: 0.5,
                                        color: '#1F545C'
                                    },
                                    {
                                        offset: 1,
                                        color: '#1A3C49'
                                    }
                                ]
                            )
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,0,0.8)'
                        }
                    }
                }
            ]
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    function echarts_7() {
        // 基于准备好的dom，初始化echarts实例
        var e=80;
        var myChart = echarts.init(document.getElementById('cart1'));
        option = {
        	title:{
			        show:true,
			        text:e+'%',
			        x:'center',
		        	y:'center',
			        textStyle: {
	                    fontSize: '12',
	                    color:'white',
	                    fontWeight: 'normal'
	                }
		       },
		    tooltip: {
		        trigger: 'item',
		        formatter: "{d}%",
		        show:false
		    },
		    legend: {
		        orient: 'vertical',
		        x: 'left',
		        show:false
		    },
		    series: 
		        {
		            name:'',
		            type:'pie',
		            radius: ['65%', '85%'],
		            avoidLabelOverlap: true,
		            hoverAnimation:false,
		            label: {
		                normal: {
		                    show: false,
		                    position: 'center'
		                },
		                emphasis: {
		                    show: false
		                }
		            },
		            labelLine: {
		                normal: {
		                    show: false
		                }
		            },
		            data:[
		                {value:e, name:'',itemStyle:{color:'#3F547A'}},
		                {value:100-e, name:'',itemStyle:{color:'#6EB4EB'}}
		            ]
		        }
		    
		};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }
    function echarts_8() {
        // 基于准备好的dom，初始化echarts实例
        var e=80;
        var myChart = echarts.init(document.getElementById('cart2'));
        option = {
        	title:{
			        show:true,
			        text:e+'%',
			        x:'center',
		        	y:'center',
			        textStyle: {
	                    fontSize: '12',
	                    color:'white',
	                    fontWeight: 'normal'
	                }
		       },
		    tooltip: {
		        trigger: 'item',
		        formatter: "{d}%",
		        show:false
		    },
		    legend: {
		        orient: 'vertical',
		        x: 'left',
		        show:false
		    },
		    series: 
		        {
		            name:'',
		            type:'pie',
		            radius: ['65%', '85%'],
		            avoidLabelOverlap: true,
		            hoverAnimation:false,
		            label: {
		                normal: {
		                    show: false,
		                    position: 'center'
		                },
		                emphasis: {
		                    show: false
		                }
		            },
		            labelLine: {
		                normal: {
		                    show: false
		                }
		            },
		            data:[
		                {value:e, name:'',itemStyle:{color:'#3F547A'}},
		                {value:100-e, name:'',itemStyle:{color:'#FFB817'}}
		            ]
		        }
		    
		};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }
    function echarts_9() {
        // 基于准备好的dom，初始化echarts实例
        var e=80;
        var myChart = echarts.init(document.getElementById('cart3'));
        option = {
        	title:{
			        show:true,
			        text:e+'%',
			        x:'center',
		        	y:'center',
			        textStyle: {
	                    fontSize: '12',
	                    color:'white',
	                    fontWeight: 'normal'
	                }
		       },
		    tooltip: {
		        trigger: 'item',
		        formatter: "{d}%",
		        show:false
		    },
		    legend: {
		        orient: 'vertical',
		        x: 'left',
		        show:false
		    },
		    series: 
		        {
		            name:'',
		            type:'pie',
		            radius: ['65%', '85%'],
		            avoidLabelOverlap: true,
		            hoverAnimation:false,
		            label: {
		                normal: {
		                    show: false,
		                    position: 'center'
		                },
		                emphasis: {
		                    show: false
		                }
		            },
		            labelLine: {
		                normal: {
		                    show: false
		                }
		            },
		            data:[
		                {value:e, name:'',itemStyle:{color:'#3F547A'}},
		                {value:100-e, name:'',itemStyle:{color:'#69F7FF'}}
		            ]
		        }
		    
		};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }
    function echarts_10() {
        // 基于准备好的dom，初始化echarts实例
        var e=80;
        var myChart = echarts.init(document.getElementById('cart4'));
        option = {
        	title:{
			        show:true,
			        text:e+'%',
			        x:'center',
		        	y:'center',
			        textStyle: {
	                    fontSize: '12',
	                    color:'white',
	                    fontWeight: 'normal'
	                }
		       },
		    tooltip: {
		        trigger: 'item',
		        formatter: "{d}%",
		        show:false
		    },
		    legend: {
		        orient: 'vertical',
		        x: 'left',
		        show:false
		    },
		    series: 
		        {
		            name:'',
		            type:'pie',
		            radius: ['65%', '85%'],
		            avoidLabelOverlap: true,
		            hoverAnimation:false,
		            label: {
		                normal: {
		                    show: false,
		                    position: 'center'
		                },
		                emphasis: {
		                    show: false
		                }
		            },
		            labelLine: {
		                normal: {
		                    show: false
		                }
		            },
		            data:[
		                {value:e, name:'',itemStyle:{color:'#3F547A'}},
		                {value:100-e, name:'',itemStyle:{color:'#4CFF91'}}
		            ]
		        }
		    
		};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }
    function echarts_11() {
        // 基于准备好的dom，初始化echarts实例
        var e=80;
        var myChart = echarts.init(document.getElementById('cart5'));
        option = {
        	title:{
			        show:true,
			        text:e+'%',
			        x:'center',
		        	y:'center',
			        textStyle: {
	                    fontSize: '12',
	                    color:'white',
	                    fontWeight: 'normal'
	                }
		       },
		    tooltip: {
		        trigger: 'item',
		        formatter: "{d}%",
		        show:false
		    },
		    legend: {
		        orient: 'vertical',
		        x: 'left',
		        show:false
		    },
		    series: 
		        {
		            name:'',
		            type:'pie',
		            radius: ['65%', '85%'],
		            avoidLabelOverlap: true,
		            hoverAnimation:false,
		            label: {
		                normal: {
		                    show: false,
		                    position: 'center'
		                },
		                emphasis: {
		                    show: false
		                }
		            },
		            labelLine: {
		                normal: {
		                    show: false
		                }
		            },
		            data:[
		                {value:e, name:'',itemStyle:{color:'#3F547A'}},
		                {value:100-e, name:'',itemStyle:{color:'#FFA263'}}
		            ]
		        }
		    
		};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }
    function echarts_12() {
        // 基于准备好的dom，初始化echarts实例
        var e=80;
        var myChart = echarts.init(document.getElementById('cart6'));
        option = {
        	title:{
			        show:true,
			        text:e+'%',
			        x:'center',
		        	y:'center',
			        textStyle: {
	                    fontSize: '12',
	                    color:'white',
	                    fontWeight: 'normal'
	                }
		       },
		    tooltip: {
		        trigger: 'item',
		        formatter: "{d}%",
		        show:false
		    },
		    legend: {
		        orient: 'vertical',
		        x: 'left',
		        show:false
		    },
		    series: 
		        {
		            name:'',
		            type:'pie',
		            radius: ['65%', '85%'],
		            avoidLabelOverlap: true,
		            hoverAnimation:false,
		            label: {
		                normal: {
		                    show: false,
		                    position: 'center'
		                },
		                emphasis: {
		                    show: false
		                }
		            },
		            labelLine: {
		                normal: {
		                    show: false
		                }
		            },
		            data:[
		                {value:e, name:'',itemStyle:{color:'#3F547A'}},
		                {value:100-e, name:'',itemStyle:{color:'#B697EB'}}
		            ]
		        }
		    
		};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }
  
})